<template>
  <details-layout leftTitle="全部轨迹(12)">
    <div class="detail">
      <div class="boxBtn">
        <mt-button v-if="typeof val == 'number'" v-for="(val, key, index) in map" :key="index" class="self-btn" :class="index == btnColor?'first-btn':''" @click="change(val, key, index)">{{key}}
          <span v-if="val != 0">({{val}})</span>
        </mt-button>
      </div>
      <axis-y :data="trackData" v-if="trackData.length > 0" @nodeClick="axisClick"></axis-y>
    </div>
  </details-layout>
</template>

<script>
  import detailsLayout from '../../components/details-layout'
  import AxisY from '../../components/axis-y'
  import { mapActions } from 'vuex'
  import request from '../../helper/request'
  import date from '../../utils/date'

  export default {
    components: {
      detailsLayout,
      AxisY
    },
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    mixins: [],
    computed: {},
    data() {
      return {
        code: '',
        item: '',
        map: {},
        json: [{
          'key': 'ly_num',
          'value': '旅业',
          'code': '001'
        },
        {
          'key': 'PP',
          'value': '全部',
          'code': '000'
        },
        {
          'key': 'wb_num',
          'value': '网吧',
          'code': '002'
        },
        {
          'key': 'tl_num',
          'value': '铁路订票',
          'code': '004'
        },
        {
          'key': 'jcg_num',
          'value': '进出港',
          'code': '003'
        },
        {
          'key': 'week_num',
          'value': '近7天',
          'code': '003'
        },
        {
          'key': 'month_num',
          'value': '近一个月',
          'code': '003'
        },
        {
          'key': 'halfyear_num',
          'value': '近一年',
          'code': '003'
        }],
        trackData: [],
        btnColor: 0,
        tag: []
      }
    },
    filters: {
      convert: function(value) {
        return value
      }
    },
    methods: {
      change(val, key, index) {
        this.btnColor = index
        this.json.map(item => {
          if(key === item.value) {
            this.code = item.code
          }
        })
        this.getAlway()
      },
      axisClick(event, item, index, targetNode) {
        this.gettraceDetail(item)
        switch(item.zylx) {
          case 'LG':
            this.$router.push('liveDetail')
            break;
          case 'WB':
            this.$router.push('onlineDetail')
            break;
          case 'TL':
            this.$router.push('vehicle')
            break;
          case 'JCG':
            this.$router.push('exitEntry')
            break;
          default:
        }
      },
      checkTimes(str) {
        let obj = Object.keys(str)
        let currentObj = {'全部': 0}
        for(var i = 0; i < obj.length; i++) {
          for(var j = 0; j < this.json.length; j++) {
            if(obj[i] === this.json[j].key) {
              currentObj[this.json[j].value] = str[obj[i]]
            }
          }
        }
        this.map = currentObj
      },
      // 轨迹多次
      async getAlway() {
        let alway = await request('people/gj_all', 'SC040800', {sfzh: '000000', 'zylb': this.code})
        this.trackData = alway.gjArr
        this.checkTimes(alway)
      },
      ...mapActions('personStore', {
        gettraceDetail: 'gettraceDetail'
      })
    },
    mounted() {
    },
    created() {
      this.getAlway()
      console.log(date(new Date(), 'yyyyMMdd', {d: -180}))
    }
  }
</script>

<style scoped>
.detail {
  margin-top: 1rem;
}
.self-btn {
  margin: 0rem 0rem .7rem .2rem;
  font-size: 1rem;
  border-radius: 30px;
  height: 1.9rem;
  background-color: #ccc;
  color: #F2F2F2;
}
.first-btn {
  background-color: #FF6600;
}
.big-box {
  background-color: #FFFFFF;
}
.boxBtn {
  margin-left: 2rem;
}
</style>

      
